<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="分配角色"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <vxe-table 
          ref="mytable"
          :data="articlesData"
          border
          highlight-current-row
          style="margin-bottom: 10px"
          @checkbox-change="handleSelectionChange"
          @checkbox-all="handleAllSelectChang"
          v-model="selectRow"
        >
          <vxe-column type="checkbox" width="50"></vxe-column>
          <vxe-column field="roleName" title="姓名"></vxe-column>
          <vxe-column field="roleId" title="角色值"></vxe-column>
        </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="personAddSubmit"
          >确 定</el-button
        >
      </span>

    </el-dialog>
  </div>
</template>
  <script>
import {
  getUserRoleSearch,
  getUserRoleDelete,
  getUserRoleSaveBatch,
  getRoleList,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
export default {
  name: "userRolePop",
  components: {},
  props: [],
  data: () => ({
    dialogVisible: false,
    data: [],
    currentUser: null,
    personList: [],
    articlesData: [],
    multipleSelection: [],
    dataForm: {
      userName: "",
      userNo: "",
    },
    row: "",
    selectRow:[],
  }),
  computed: {},
  mounted() {},
  methods: {
    initData(row,list) {
      this.dialogVisible = true;
      this.row = row;
      this.personList = list;
      this.$nextTick(() => {
        this.$refs.mytable.clearCheckboxRow();
      });
      this.getUserRoleList();
    },
    getUserRoleList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          userId: this.row.userId,
        },
      };
      getUserRoleSearch(params).then((result) => {
        if (result.result) {
          this.selectRow = result.resultdata.data;
          this.getListRole();
        }
      });
    },
    async getListRole() {
      const that = this;
      // 组装分页参数
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          currentPage: 1, // 当前多少页
          pageSize: 9999, // 每页显示数据
        },
      };
      const R = await getRoleList(params);
      const data = R.resultdata;
      this.articlesData = data.data; // 填充列表数据
      this.$nextTick(() => {
        this.compareAndCheckCheckbox()
      })
    },
    compareAndCheckCheckbox() {
      this.$refs.mytable.clearCheckboxRow(); // 清空已勾选的复选框
      this.articlesData.forEach((tableItem) => {
        this.selectRow.forEach((selectItem) => {
          if (tableItem.roleId === selectItem.roleId) {
            this.$refs.mytable.setCheckboxRow(tableItem, true); // 根据具体的行索引来勾选复选框
          }
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSelectionChange(personRow) {
      this.personList = personRow.records;
      console.log(this.personList, "personList");
    },
    handleAllSelectChang({ checked, records }) {
      this.personList = records;
      console.log(this.personList, "multipleSelection");
    },

    personAddSubmit() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        type: "user",
        data: [],
      };
      let allList = [...this.personList];
      console.log(allList, "allList");
      allList.forEach((item) => {
        params.data.push({
          roleId: item.roleId,
          userId: this.row.userId,
          userName: null,
          userNo: null,
          roleName: item.roleName,
        });
      });
      if (allList.length == 0) {
        this.$message({
          message: "请先勾选角色",
          type: "warning",
        });
      } else {
        getUserRoleSaveBatch(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getUserRoleList();
            this.getListRole();
            this.dialogVisible = false;
            this.$emit("onChange", this.personList);
          }
        });
      }
    },
  },
};
</script>
  